<template>
  <div class="every">
    <div class="caseCon" v-for="(item, index) in listData" :key="index">
      <div v-if="item.completeCount == 0 && item.checkFlag != 0">
        <div class="caseOne">
          <img
            v-if="!wuFlag1"
            class="detailsTopImg"
            :src="`https://dtsh-static.oss-cn-shanghai.aliyuncs.com/dt-management/caseRate/${
              item.isReach ? 'pass' : 'noPass'
            }.png`" />
          <p class="p1">
            <span>{{ item.name }}</span>
            <span>{{ item.resultFailNote }}</span>
          </p>
          <div v-if="!wuFlag1">
            <div v-if="item.childFlag != 1">
              <p class="p2" v-if="item.resultValue != -1">
                <span>当月完成</span>
                <span>{{ item.resultValue }}{{ item.targetUnit }}</span>
              </p>
              <p class="p2" v-else>
                <span></span>
                <span class="noKao">暂不考核</span>
              </p>
            </div>
            <div v-else>
              <p class="p2">
                <span>当月完成</span>
                <span :class="item.isReach ? 'wan' : 'wei1'">{{ item.isReach ? '已完成' : '未完成' }}</span>
              </p>
            </div>
          </div>
          <!-- <p class="p2" v-if="!wuFlag1">
            <span>当月完成</span>
            <span>{{ item.resultValue }}{{ item.targetUnit }}</span>
          </p> -->
        </div>
      </div>
    </div>
    <div class="title" v-if="completeLen">
      <span>以下考核项中，任选一项完成即可</span>
      <span v-if="!wuFlag1" :class="oneCompleteFlag ? 'da' : 'wei'">
        {{ oneCompleteFlag ? '已达标' : '未达标' }}
      </span>
    </div>
    <div class="caseCon" v-for="(item, index) in completeCount1" :key="'1' + index">
      <div v-if="item.checkFlag != 0">
        <div class="caseOne">
          <img
            v-if="!wuFlag1"
            class="detailsTopImg"
            :src="`https://dtsh-static.oss-cn-shanghai.aliyuncs.com/dt-management/caseRate/${
              item.isReach ? 'pass' : 'noPass'
            }.png`" />
          <p class="p1">
            <span>{{ item.name }}</span>
            <span>{{ item.resultFailNote }}</span>
          </p>
          <div v-if="!wuFlag1">
            <div v-if="item.childFlag != 1">
              <p class="p2" v-if="item.resultValue != -1">
                <span>当月完成</span>
                <span>{{ item.resultValue }}{{ item.targetUnit }}</span>
              </p>
              <p class="p2" v-else>
                <span></span>
                <span class="noKao">暂不考核</span>
              </p>
            </div>
            <div v-else>
              <p class="p2">
                <span>当月完成</span>
                <span :class="item.isReach ? 'wan' : 'wei1'">{{ item.isReach ? '已完成' : '未完成' }}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'rate',
    props: {
      listData: {
        type: Array,
        default: []
      },
      wuFlag: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        completeCount1: [],
        oneCompleteFlag: false,
        completeLen: 0,
        wuFlag1: false
      }
    },

    watch: {
      listData: {
        handler(val) {
          this.completeCount1 = val.filter((item) => {
            return item.completeCount == 1
          })
          this.completeLen = this.completeCount1.length
          this.oneCompleteFlag = this.completeCount1.some((item) => {
            return item.isReach == true
          })
        },
        deep: true,
        immediate: true
      },
      wuFlag: {
        handler(val) {
          this.wuFlag1 = val
        },
        deep: true,
        immediate: true
      }
    }
  }
</script>
<style lang="scss" scoped>
  .title {
    color: #333;
    font-size: 16px;
    margin-top: 20px;
    display: flex;
    font-weight: bold;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 15px;
    border-top: 1px rgba(239, 239, 239, 1) solid;
    line-height: 40px;
    .da {
      font-size: 14px;
      font-weight: normal;
      color: rgba(96, 210, 136, 1);
    }
    .wei {
      font-size: 14px;
      font-weight: normal;
      color: rgba(255, 103, 103, 1);
    }
  }

  .caseOne {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 12px;
    margin-top: 20px;
    > img {
      display: block;
      width: 18px;
      height: 18px;
      margin-right: 10px;
      margin-top: 2px;
    }
    p.p1 {
      flex: 1;
      span {
        display: block;
      }
      span:first-child {
        font-size: 14px;
        color: #333;
      }
      span:last-child {
        margin-top: 5px;
        color: rgba(153, 153, 153, 1);
      }
    }
    p.p2 {
      width: 54px;
      span {
        display: block;
        text-align: right;
      }
      span:first-child {
        color: rgba(153, 153, 153, 1);
      }
      span:last-child {
        font-size: 16px;
        color: rgba(51, 51, 51, 1);
      }
      span.noKao {
        font-size: 12px;
        color: rgba(153, 153, 153, 1);
      }
    }
  }
  .wan {
    font-size: 14px !important;
    color: rgba(96, 210, 136, 1) !important;
  }
  .wei1 {
    font-size: 14px !important;

    color: rgba(255, 103, 103, 1) !important;
  }
</style>
